<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
            <div class="title">
              <span class="title-text">专业质控指标概览</span>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="decorationColors"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <span class="text" @click="goToHomePage">返回首页</span>
            </div>
            <div class="react-left ml-3" style=" width:260px;">
              <span class="text">{{ subtitle[1] }}</span>
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right mr-3" style="background-color: #0f1325;width:250px;" > 
              <span class="text fw-b">{{ subtitle[2]}}</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text">
                {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
                {{ timeInfo.dateDay }}
              </span>
            </div>
          </div>
        </div>
        <div class="body-box">
          <div class="QualityControlBox">
          <QualityControl
          v-for="index in 24"
              :key="index"
              :title="getLineTitle(index)"
              :PieIndex=index
          />
        </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
import { formatTime } from "@/utils/index";
import { WEEK } from "@/constant/index";
import useDraw from "@/utils/useDraw";
import { title, subtitle, moduleInfo } from "@/constant/index";
import { RouterLink, RouterView } from "vue-router";
import QualityControl from '../QualityControlView/QualityControl.vue';
export default defineComponent({
  components: {
    QualityControl
  },
  setup() {
    // * 颜色
    const decorationColors = ["#568aea", "#000000"];
    // * 加载标识
    const loading = ref<boolean>(true);
    // * 时间内容
    const timeInfo = reactive({
      setInterval: 0,
      dateDay: "",
      dateYear: "",
      dateWeek: "",
    });
    // * 适配处理
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
    // 生命周期
    onMounted(() => {
      cancelLoading();
      handleTime();
      // todo 屏幕适应
      windowDraw();
      calcRate();
    });

    onUnmounted(() => {
      unWindowDraw();
      clearInterval(timeInfo.setInterval);
    });

    // methods
    // todo 处理 loading 展示
    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false;
      }, 500);
    };

    // todo 处理时间监听
    const handleTime = () => {
      timeInfo.setInterval = setInterval(() => {
        const date = new Date();
        timeInfo.dateDay = formatTime(date, "HH: mm: ss");
        timeInfo.dateYear = formatTime(date, "yyyy-MM-dd");
        timeInfo.dateWeek = WEEK[date.getDay()];
      }, 1000);
    };

    const getLineTitle = (num: number) => {
      let result = "";
      switch (num) {
        case 1:
          result = "床护比";
          break;
        case 2:
          result = "白天平均护患比";
          break;
        case 3:
          result = "夜班平均护患比";
          break;
        case 4:
          result = "每住院患者24h平均护理时数";
          break;
          case 5:
          result = "病区5年以下护士占比";
          break;
          case 6:
          result = "病区20年及以上护士占比";
          break;
          case 7:
          result = "护士离职率";
          break;
          case 8:
          result = "特级护理占比";
          break;
          case 9:
          result = "一级护理占比";
          break;
          case 10:
          result = "二级护理占比";
          break;
          case 11:
          result = "三级护理占比";
          break;
          case 12:
          result = "住院患者身体约束率";
          break;
          case 13:
          result = "住院患者跌倒发生率";
          break;
          case 14:
          result = "住院患者跌倒伤害占比";
          break;
          case 15:
          result = "住院患者2期及以上压力性损伤发生率";
          break;
          case 16:
          result = "气管导管(气管插管、气管切开)非计划拔管率";
          break;
          case 17:
          result = "经口、经鼻胃肠导管非计划拔管率经";
          break;
          case 18:
          result = "导尿管非计划拔管率";
          break;
          case 19:
          result = "中心静脉导管(CVC)非计划拔管率";
          break;
          case 20:
          result = "经外周置入中心静脉导管(PICC)非计划拔管率";
          break;
          case 21:
          result = "导尿管相关尿路感染(CAUTI)发生率";
          break;
          case 22:
          result = "中心静脉导管(CVC)相关血流感染发生率";
          case 23:
          result = "经外周置入中心静脉导管(PICC)相关血流感染发生率";
          break;
          case 24:
          result = "呼吸机相关肺炎(VAP)发生率";
          break;
        default:
          result = "";
          break;
      }
      return result;
    };

    return {
      loading,
      timeInfo,
      appRef,
      title,
      subtitle,
      moduleInfo,
      getLineTitle,
    };
  },
  methods: {
    goToHomePage() {
      this.$router.push({ name: "Index" });
    }
  },
});
</script>
  
  <style lang="scss" scoped>
@import "./Css/QualityControlView.scss";
</style>
  